<template>
  <div class="div">
    <div class="top-div">
      <a class="a1" @click="GoBackToProfile">&lt;&nbsp;返回客户档案</a>
      <h3 class="h3" v-if="this.$route.query.flag == 'add'">新增用户</h3>
      <h3 class="h3" v-if="this.$route.query.flag == 'edit'">编辑用户</h3>
      <h3 class="h3" v-if="this.$route.query.flag == 'details'">查看用户</h3>
    </div>
    <div class="form-div" style="height: 580px">
      <el-form
        :disabled="this.$route.query.toDisableTable === 'true'"
        ref="ruleForm"
        :model="form"
        label-width="100px"
        class="demo-form"
        style="label-width: 120px"
      >
        <div class="top-div-p">
          <span class="span01"></span>
          <p>基础信息</p>
        </div>

        <el-form-item
          label="客户账号"
          prop="account"
          :rules="[
            {
              required: true,
              message: '客户账号为必填项',
              trigger: 'change',
            },
			{ pattern: /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/, message: '请填写正确格式手机号' }
          ]"
        >
          <el-input
            type="text"
            v-model="form.account"
            style="width: 290px"
            placeholder="请填写手机号，支持修改"
            maxlength="11"
			onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item
          label="登录密码"
          prop="passwd"
          :rules="[
            {
              required: true,
              message: '登陆密码为必填项',
              trigger: 'change',
            },
			{ pattern: /[a-zA-Z0-9]{6,}/, message: '不少于六位字母+数字' }
          ]"
        >
          <el-input
			type="text"
            v-model="form.passwd"
            style="width: 290px"
			onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"
            placeholder="客户登录商城所使用的密码"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="客户名称"
          prop="name"
          :rules="[
            {
              required: true,
              message: '客户名称为必填项',
              trigger: 'change',
            },
          ]"
        >
          <el-input
            v-model="form.name"
            style="width: 290px"
            placeholder="请填写客户名称 / 客户店铺名称"
          ></el-input>
        </el-form-item>
		<el-form-item label="所属集团"  :rules="[
            {
              required: true,
              message: '客户名称为必填项',
              trigger: 'change',
            },
          ]">
		  <el-select v-model="form.groupId" @change="getkhType" placeholder="请选择">
			<el-option
			  v-for="item in belongingOptions"
			  :key="item.value"
			  :label="item.name"
			  :value="item.id"
			/>
		  </el-select>
		</el-form-item>
        <el-form-item
          label="客户类型"
          prop="categoryId"
          :rules="[
            {
              required: true,
              message: '客户类型为必填项',
              trigger: 'change',
            },
          ]"
        >
          <el-select v-model="form.categoryId" placeholder="请选择">
            <el-option
              v-for="item in profileOption"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="绑定账号"
          prop="systemCustomerRoleUserId"
          :rules="[
            {
              required: true,
              message: '绑定系统客户为必填项',
              trigger: 'change',
            },
          ]"
        >
          <el-select
            v-model="form.systemCustomerRoleUserId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in systemCustomers"
              :key="item.value"
              :label="item.username"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="货到付款">
          <el-radio-group v-model="form.isCodSupported">
            <el-radio label="1">支持</el-radio>
            <el-radio label="2" style="margin-left: 5px">不支持</el-radio>
          </el-radio-group>
        </el-form-item>-->
        <!--        <el-form-item label="客户起订价">
          <el-input
            v-model="form.initPrice"
            style="width: 290px"
            placeholder="请填写客户名称 / 客户店铺名称"
          ></el-input>
        </el-form-item>-->
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--        <el-form-item label="公斤打印">
          <el-switch
            v-model="switchValue"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item>-->
        <!--        <el-form-item label="业务员">
          <el-select v-model="form.salesManCode" placeholder="请选择活动区域">
            <el-option
              v-for="item in salesmanOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>-->

        <!--        <el-form-item label="客户编码">
          <el-input
            v-model="form.code"
            style="width: 290px"
            placeholder="请输入不超过32个字符"
            maxlength="32"
            show-word-limit
          ></el-input>
        </el-form-item>-->
        
        <!--        <el-form-item label="营业执照/门头照">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>-->
        <div class="top-div-p">
          <span class="span01"></span>
          <p>收货信息</p>
        </div>
        <!--        <el-form-item
          label="区域"
          prop="customerAddress.areaId"
          :rules="[
            {
              required: true,
              message: '区域为必填项',
              trigger: 'change',
            },
          ]"
        >
          <el-select
            v-model="form.customerAddress.areaId"
            placeholder="请选择活动区域"
          >
            <el-option
              v-for="(item,index) in areaOption"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>-->
        <!--        <el-form-item
          label="默认路线"
          prop="customerAddress.routeId"
          :rules="[
            {
              required: true,
              message: '默认路线为必填项',
              trigger: 'change',
            },
          ]"
        >
          <el-select
            v-model="form.customerAddress.routeId"
            placeholder="请选择活动区域"
          >
            <el-option
              v-for="item in routerOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>-->
        <el-form-item
          label="联系人"
          prop="customerAddress.contacts"
          :rules="[
            {
              required: true,
              message: '联系人为必填项',
              trigger: 'change',
            },
          ]"
        >
          <el-input
            v-model="form.customerAddress.contacts"
            style="width: 290px"
            placeholder="请填写联系人姓名"
            maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item
          label="收货手机"
          prop="customerAddress.phone"
          :rules="[
            {
              required: true,
              message: '收货手机为必填项',
              trigger: 'change',
            },
            {
              pattern:
                /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/,
              message: '请填写正确格式手机号',
            },
          ]"
        >
          <el-input
            v-model="form.customerAddress.phone"
            style="width: 290px"
            placeholder="请填写收获手机号码"
            maxlength="11"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item
          label="详细地址"
          prop="customerAddress.addr"
          :rules="[
            {
              required: true,
              message: '详细地址为必填项',
              trigger: 'change',
            },
          ]"
        >
          <el-input
            type="textarea"
            v-model="form.customerAddress.addr"
            style="width: 290px"
            maxlength="128"
            show-word-limit
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="设置经纬度">
          <el-input
            v-model="form.customerAddress.addrLat"
            style="width: 290px"
            placeholder="请选择"
          ></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="送货时间">
          <el-select
            v-model="form.customerAddress.deliveryTime"
            placeholder="请选择活动区域"
          >
            <el-option
              v-for="item in deliveryTimeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item> -->
        <!--        <div class="top-div-p">
          <span class="span01"></span>
          <p>打印模板</p>
        </div>
        <el-form-item label="发货单打印模板">
          <el-select
            v-model="form.region"
            placeholder="请选择"
            style="width: 290px"
          >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检测单打印模板">
          <el-select
            v-model="form.region"
            placeholder="请选择"
            style="width: 290px"
          >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签打印模板">
          <el-select
            v-model="form.region"
            placeholder="请选择"
            style="width: 290px"
          >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>-->
      </el-form>
    </div>
    <div class="bottom-div" style="height: 76px">
      <el-button
        class="bottom-div-btn01"
        style="width: 50px; height: 30px"
        @click="cancel()"
      >
        取消
      </el-button>
      <el-button
        v-show="this.$route.query.showSubmit"
        style="width: 50px; height: 30px"
        type="primary"
        @click="save('ruleForm')"
      >
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
import {
  add,
  getAllProfileType,
  getAllProfile,
  getAllGroup,
  getSystemCustomer,
} from '@/api/customer/customerProfile'
import { getAllArea } from '@/api/distribution/lineArea'

export default {
  data() {
    return {
      //addForm。
      form: {
        wsId: '1',
        account: '',
        passwd: '',
        name: '',
        categoryId: '',
        isCodSupported: '1',
        status: undefined,
        initPrice: '',
        salesManCode: '',
        code: '',
        groupId: undefined,
        licenceImg: '',
        systemCustomerRoleUserId: undefined,
        customerAddress: {
          areaId: '',
          routeId: '',
          contacts: '',
          phone: '',
          addr: '',
          addrLat: '',
          deliveryTime: '',
          remarks: '',
        },
      },
      // 系统客户角色用户
      systemCustomers: [],
      // showSubmit: false,  //详情-保存按钮的显示与隐藏。
      value: '', //select值。
      dialogImageUrl: '', //照片墙。
      dialogVisible: false, //照片墙
      radio01: '2 ', //单选框。
      radio02: '1',
      switchValue: true, //开关按钮。
      options: [
        {
          value: 1,
          label: '不限制',
        },
        {
          value: 2,
          label: '自定义',
        },
      ],
      profileOption: [],
      belongingOptions: [],
      salesmanOption: [{ value: 1, label: '无' }],
      areaOption: [],
      routerOption: [{ value: 1, label: '路线1' }],
      deliveryTimeOption: [
        { value: 1, label: '未设置~未设置' },
        { value: 2, label: '06:00~未09:00' },
      ],
      InvoiceOption: [{ value: 1, label: '天心区' }],
      testSheetOption: [{ value: 1, label: '天心区' }],
      labelOption: [{ value: 1, label: '天心区' }],
    }
  },
  mounted() {
    if (this.$route.query.flag == 'edit') {
      this.form = this.$route.query.item
    } else if (this.$route.query.flag == 'details') {
      this.form = this.$route.query.item
    }
    // this.getType()
    this.getGroup()
    this.getArea()
    this.getSystem()
  },
  methods: {
	  getkhType() {
		  this.form.categoryId = ''
		  this.getType(this.form.groupId)
	  },
    async getArea() {
      const res = await getAllArea()
      this.areaOption = res.data
    },
    async getGroup() {
      const ress = await getAllGroup()
      this.belongingOptions = ress.data
    },
    async getSystem() {
      const ress = await getSystemCustomer()
      this.systemCustomers = ress.data
    },
    async getType(e) {
		let params = {
			groupId:e
		}
      const res = await getAllProfile(params)
      console.log(res, '1917')
      this.profileOption = res.data
    },
    //返回客户档案。
    GoBackToProfile() {
      this.$router.push('/customer/profile')
    },
    //取消
    cancel() {
      this.$confirm('确定返回列表页面?', '确定', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          await this.$router.push('/customer/profile')
        })
        .catch(() => {})
    },
    //照片墙。
    handleRemove(file, fileList) {
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    //表单提交验证。
    async save(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const res = await add(this.form)
          if (res.status == 200) {
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
            await this.$router.push('/customer/profile')
          } else {
            return false
          }
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
.div {
  .top-div {
    padding: 10px 20px;
    border-bottom: 1px solid #cccc;
    .a1 {
      display: inline-block;
      direction: none;
      color: rgb(96 98 102);
    }
    .a1:hover {
      cursor: pointer;
    }
    .h3 {
      margin-left: 38%;
      display: inline-block;
    }
  }
  .form-div {
    margin-top: 20px;
    margin-left: 32%;
    .demo-form {
      //表头"基础信息左边的小杠"
      .top-div-p {
        margin-left: -10%;
        .span01 {
          display: inline-block;
          width: 3px;
          height: 11px;
          background-color: rgb(0 0 0 / 70%);
          margin-bottom: -1px;
        }
        p {
          margin-left: 7px;
          display: inline-block;
          font-size: 13px;
          font-weight: bold;
          height: 15px;
        }
      }
    }
  }
  .bottom-div {
    padding: 10px 0;
    border-top: 0.5px solid #cccc;
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    background: rgb(255 255 255);
    .bottom-div-btn01 {
      margin-left: 35%;
    }
  }
  button.el-button.bottom-div-btn01.el-button--default.el-button--small {
    margin-top: 15px;
  }
}
</style>
